<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-w-100 cu-p-20">
			<view class="cu-w-100 cu-bg-main cu-border-r-10 cu-shadow cu-py-20">
				<view class="cu-w-100 cu-p-20 cu-row cu-j-sb">
					<view>
						提示：如需设置，请点下方红色文字即可修改
					</view>
					<view><button @click="finishBtn" class="mini-btn" type="primary" size="mini">完成</button></view>
				</view>

				<view class="cu-w-100 cu-p-20">
					<view class="cu-w-100 cu-p-20 cu-border-r-20" style="border: 1px dotted #3e3e7e;">
						<cu-pinyin-identify @changeDuyinBtn="changeDuyinBtn" :data="identifyData"></cu-pinyin-identify>
					</view>
				</view>

			</view>
		</view>

		<uni-popup ref="pinyinPopup" type="bottom" background-color="#f8f8f8">
			<view class="cu-w-100 cu-p-20">
				<view class="cu-w-100 cu-pt-20 cu-d-flex cu-flex-column cu-j-sb cu-a-stretch">
					<block v-if="multipleData !== undefined">
						<block v-for="(item,index) in multipleData.data.multiple">
							<view @click="selectPinyin(multipleData,index)" :key="index" class="cu-w-100 cu-text-center"
								style="height: 60rpx;line-height: 60rpx;">
								<text style="border-bottom: 1px solid #3e3e7e;">{{item.replace("0","5")}}</text>
							</view>
						</block>
					</block>

					<view class="cu-w-100 cu-text-center" style="height: 60rpx;line-height: 60rpx;">
						<text>提示：音调为1~5的数字编号，其中“5”表示轻声。</text>
					</view>
				</view>
			</view>
		</uni-popup>

	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	const {
		textToSsml,
		pinyinIdentify,
		identifyToContent,
		handlePause
	} = require("@/pages/voice/utils/voice/index")
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
				voiceStore: state => state.voiceStore,
			})
		},
		data() {
			return {
				navBarOptions: {
					title: "多音字",
					leftText: "返回",
					leftIcon: "back",
				},
				// 多音字
				identifyData: [],
				// 多音字数据
				multipleData: undefined,
				// 选择标识
				changeMark:false
			};
		},
		onLoad() {
			/* if(true){
				const str = "发斯蒂芬[读音:a3啊]阿萨达千[读音:wa3瓦]时阿萨达啊大声道阿萨达as 阿萨达阿大声道1阿达啊";
				console.log('init',pinyinIdentify(str))
			} */
			// this.voiceStore.text = "张伟[读音:di2的]葬礼在第三天举行。 来参加葬礼的人很多，[读音:zhi1只]是大部分都是上了年纪的老人，杨间在人群之中显得那么格格不入。 张伟[读音:di2的][停顿:1s]儿子张文文哭的很伤心，有不[停顿:1s]少人前去安慰但大多数都是年轻人。"
			this.identifyData = pinyinIdentify(this.voiceStore.html)
		},
		methods: {
			changeDuyinBtn(data, subscript1, subscript2) {
				if (data === undefined || subscript1 === undefined || subscript2 === undefined) {
					uni.showToast({
						icon: "error",
						title: "参数错误"
					})
					return
				}
				this.multipleData = {
					data: data,
					subscript1,
					subscript2
				}
				this.$refs.pinyinPopup.open()
			},
			selectPinyin(value,index){
				console.log(value,index)
				this.changeMark = true
				const {
					data,
					subscript1,
					subscript2
				} = value
				const selectVal = data.multiple[index].replace("0","5")
				this.identifyData[subscript1].childrens[subscript2].attrs.style = "color:#009688;"
				this.identifyData[subscript1].childrens[subscript2].text =  "[读音:" + selectVal + data.value + "]"
				this.multipleData = undefined
				this.$refs.pinyinPopup.close()
			},
			finishBtn() {
				if(this.changeMark){
					const {html,text} = identifyToContent(this.identifyData)
					this.voiceStore.html = html
					this.voiceStore.text = text
					this.voiceStore.identifyData = this.identifyData
				}
				this.goBack();
			},
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
		}
	}
</script>

<style lang="scss">

</style>